<template>
  <div style="width: 100%; height: 100%;" class="flex-y w_box">
    <!-- <dv-border-box-12 :key="brder1Key" style="padding-top: 20px"> -->
    <!-- preserveAspectRatio="none meet" -->
    <div id="p1" class="w100 h-full svg_contnet" style="flex: 1;">
      <!-- @click="handleClick" -->
      <!-- 事例 -->
      <div class="legend_list">
        <div
          @click="handleLegend(item)"
          class="legend_item flex-x"
          v-for="(item, index) in legendList"
          :key="index"
        >
          <div
            class="legend_dot"
            :style="{
              backgroundColor: legendVal.includes(item.value)
                ? '#eee'
                : item.color
            }"
          ></div>
          <div>{{ item.label }}</div>
        </div>
      </div>
      <svg
        ref="mysvg"
        id="s1"
        width="100%"
        height="100%"
        viewBox="0 0 1682.4 560"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
        <image
          object-fit="cover"
          preserveAspectRatio="none meet"
          width="100%"
          height="100%"
          id="svg_2"
          xlink:href="svgs/chejian.png"
        />
        <!-- transform="translate(300,100)" 让g标签内的元素定位基于group -->
        <g
          v-tooltip="{
            ref: 'tooltipRef',
            delay: 0,
            class: 'tooltip-custom'
          }"
          @mouseenter="mouseenterItem(item)"
          @click="handleClickItem(item)"
          v-for="(item, index) in newList"
          :key="index"
          id="myGroup"
          :transform="`translate(${item.x || -100},${item.y || -100})`"
        >
          <filter id="glow">
            <feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
            <feMerge>
              <feMergeNode in="coloredBlur" />
              <feMergeNode in="SourceGraphic" />
            </feMerge>
          </filter>
          <text
            :fill="rendererColor(item.deviceStatus)"
            font-size="15"
            id="svg_112"
            text-anchor="middle"
            stroke="#fff"
            stroke-dasharray="null"
            stroke-linecap="null"
            stroke-linejoin="null"
            stroke-width="0"
            xml:space="preserve"
            x="0"
            y="5"
          >
            <tspan
              v-for="(t, tIndex) in getTspan(item.tempAreaCount)"
              :key="tIndex"
              :x="t.x"
              :y="t.y"
            >
              {{ item[t.key] || "--" }}℃
            </tspan>
          </text>
          <rect
            x="-34"
            :y="getRectY(item.tempAreaCount)"
            width="68"
            :height="getRectHeight(item.tempAreaCount)"
            rx="3"
            ry="3"
            :fill="rendererColor(item.deviceStatus, 0.2)"
            :stroke="rendererColor(item.deviceStatus)"
            stroke-width="1"
            filter="url(#glow)"
            opacity="1"
          />

          <circle
            :class="item.deviceStatus == '101' ? 'loading-circle-1' : ''"
            cx="0"
            cy="20"
            r="6"
            :stroke="rendererColor(item.deviceStatus)"
            :fill="rendererColor(item.deviceStatus)"
          />
        </g>
      </svg>
    </div>
    <!-- 浮窗 -->
    <div
      v-show="JSON.stringify(row) !== '{}'"
      ref="tooltipRef"
      class="tooltip-content"
    >
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>设备编号: {{ row.deviceToken }}</div>
      </div>
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>设备名称: {{ row.deviceName }}</div>
      </div>
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>制造单元: {{ row.manufactureSite }}</div>
      </div>
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>
          程序运行时间:
          <span v-if="!row.programRunTime || row.programRunTime == '0'">
            --
          </span>
          <span v-else>
            {{ row.programRunTime | formatDate }}
          </span>
        </div>
      </div>
      <div style="display: flex;align-items: center;" class="tool_item">
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <div>
          程序设定时间:
          <span v-if="!row.programSetTime || row.programSetTime == '0'">
            --
          </span>
          <span v-else>
            {{ row.programSetTime | formatDate }}
          </span>
        </div>
      </div>
      <div
        v-for="(item, index) in getTspan(row.tempAreaCount)"
        :key="item.key"
        style="display: flex;align-items: center;"
        class="tool_item"
      >
        <span
          :style="{
            backgroundColor: rendererColor(row.deviceStatus)
          }"
          style="margin-right: 6px;display:inline-block;width:10px;height:10px;border-radius:10px"
        ></span>
        <!-- firstRealTemp secondRealTemp thirdRealTemp -->
        <div>
          PV{{ index + 1 }}:
          <span> {{ row[item.key] }}℃ </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixinReszie } from "@/mixin/resize.js";
import { generateId } from "@/utils";
import {
  DEVICE_LIST,
  DEVICE_STATE,
  NO_ANIME_TYPE,
  CENTRALIZED_TIME
} from "../constant";
import { hex2Rgba } from "@/utils/utils";
import initMqtt from "@/views/common/js/device/mqttUtils.js";
import SpotPoint from "@/components/SpotPoint";
import _ from "lodash";
export default {
  components: {
    SpotPoint
  },
  props: {
    resultArray: {
      type: Array,
      default: () => []
    }
  },
  mixins: [mixinReszie],
  computed: {
    newList() {
      return this.resultArray.filter(item => {
        return !this.legendVal.includes(Number(item.deviceStatus));
      });
    },
    getTspan() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        // firstRealTemp secondRealTemp thirdRealTemp
        switch (count) {
          case 1:
            return [
              {
                key: "firstRealTemp",
                x: "-0",
                y: "6"
              }
            ];
          case 2:
            return [
              {
                key: "firstRealTemp",
                x: "-0",
                y: "-10"
              },
              {
                key: "secondRealTemp",
                x: "-2",
                y: "6"
              }
            ];
          case 3:
            return [
              {
                key: "firstRealTemp",
                x: "0",
                y: "-25"
              },
              {
                key: "secondRealTemp",
                x: "0",
                y: "-10"
              },
              {
                key: "thirdRealTemp",
                x: "-2",
                y: "6"
              }
            ];

          default:
            return [
              {
                key: "firstRealTemp",
                x: "0",
                y: "6"
              }
            ];
        }
      };
    },
    // 获取矩形偏移
    getRectY() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        switch (count) {
          case 1:
            return -10;
          case 2:
            return -26;
          case 3:
            return -40;

          default:
            return -10;
        }
      };
    },
    // 获取矩形高度
    getRectHeight() {
      return function(tempAreaCount) {
        const count =
          !tempAreaCount || tempAreaCount == "0" ? 1 : Number(tempAreaCount);
        switch (count) {
          case 1:
            return 20;
          case 2:
            return 36;
          case 3:
            return 50;

          default:
            return 20;
        }
      };
    },
    rendererColor() {
      return function(status, alpha = 1) {
        const color =
          DEVICE_STATE.find(item => item.value == status)?.color || "#929292";
        return hex2Rgba(color, alpha);
      };
    },
    screenWidth() {
      return window.screen.width >= 1920;
    }
  },
  data() {
    return {
      legendVal: [],
      legendList: DEVICE_STATE,
      row: {},
      option: {},

      point: [],
      config1: {
        number: [0]
        // content: "{nt}个",
      },
      loading: false,
      brder1Key: generateId(),
      legendData: [],
      DEVICE_LIST: DEVICE_LIST
    };
  },
  watch: {},
  async mounted() {},

  methods: {
    handleClickItem(item) {
      this.$emit("handleClick", item);
    },
    handleLegend(row) {
      const index = this.legendVal.findIndex(item => item == row.value);
      if (index == -1) {
        this.legendVal.push(row.value);
      } else {
        this.legendVal.splice(index, 1);
      }
    },
    mouseenterItem(row) {
      this.row = _.cloneDeep(row);
    },
    cursorPoint(evt, svg) {
      let pt = svg.createSVGPoint();
      pt.x = evt.clientX;
      pt.y = evt.clientY;
      return pt.matrixTransform(svg.getScreenCTM().inverse());
    },
    handleClick(evt) {
      let mysvg = this.$refs.mysvg;
      let pt = this.cursorPoint(evt, mysvg);
      const x = parseInt(pt.x);
      const y = parseInt(pt.y) - 20;
      console.log(`,x:${x},y:${y}`);
    }
  }
};
</script>
<style lang="scss">
.vue-tooltip.tooltip-custom {
  /* 这里进行父元素样式更改 */
  background-color: #fff;
}
.vue-tooltip.tooltip-custom .tooltip-arrow {
  /* 下方的小三角形 */
  border-color: #fff;
}
.vue-tooltip.tooltip-custom .tooltip-content {
  /* 矩形内容区域 */
  color: #333;
  padding: 6px 0;
  .tool_item {
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
<style lang="scss" scoped>
.svg_contnet {
  position: relative;
  .legend_list {
    position: absolute;
    left: 50px;
    top: 50px;
    .legend_item {
      cursor: pointer;
      margin-bottom: 10px;
      .legend_dot {
        margin-right: 6px;
        width: 30px;
        height: 14px;
        border-radius: 4px;
      }
    }
  }
}
.w_box {
  overflow-y: hidden !important;
}
@keyframes morph {
  0% {
    stroke-width: 10;
    stroke-opacity: 0.1;
  }

  25% {
    stroke-width: 30;
    stroke-opacity: 0.3;
  }

  50% {
    stroke-width: 10;
    stroke-opacity: 0.5;
  }

  75% {
    stroke-width: 10;
    stroke-opacity: 0.3;
  }

  100% {
    stroke-width: 10;
    stroke-opacity: 0;
  }
}

.loading-circle-1 {
  -webkit-animation: morph 2s ease infinite;
  animation: morph 2s ease infinite;
}
</style>
